<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>{block name="title"}标题{/block}</title>
    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/index/css/animate.css"/>
    <link rel="stylesheet" href="/static/index/css/index.css"/>
    <style>
        @media (max-width: 768px) {
            .search-list{
                display: none;
            }
        }
        .search-list{
            position: absolute;
            margin-top: 2px;
            padding-left: 10px;
            background-color: #fff;
            border-radius: 5px;
            width: 170px;
        }
        .search-list-item{
            margin: 10px 0;
        }
        .search-list-item a{
            color: #0f0f0f;
        }
        .loginOut{
            position: relative;
        }
        .loginOut .outSpan{
            position: absolute;
            display: none;
            background-color: #fff;
            top: 40px;
            right: 10px;
            padding: 6px 12px;
            border-radius: 10px;
        }
        .loginOut .outSpan a{
            text-decoration: none;
            color: #0f0f0f;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="{:url('/')}" class="navbar-brand">小黑程序员</a>
        </div>
        <div class="navbar-menu collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="{:url('/')}">首页</a></li>
                {volist name="cates" in id="vo"}
                <li><a href="{:url('/cate/'.$vo.id)}">{$vo.catename}</a></li>
                {/volist}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {if $nickname}
                <li class="loginOut">
                    <a href="#">{$nickname}</a>
                    <div class="outSpan">
                        <a href="#" id="logout">退出</a>
                    </div>
                </li>
                {else /}
                <li><a href="{:url('/login')}">登录</a></li>
                <li><a href="{:url('/register')}">注册</a></li>
                {/if}
                <li><a href="#">投稿</a></li>
            </ul>
            <form action="#" class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control input-sm" id="search" name="search" placeholder="搜索"/>
                </div>
                <div class="form-group">
                    <button type="submit" id="searchBtn" class="btn btn-default btn-sm">搜索</button>
                </div>
                <div class="search-list">

<!--                    <div class="search-list-item"><a href="">PHP-2</a></div>-->
<!--                    <div class="search-list-item"><a href="">PHP-3</a></div>-->
                </div>
            </form>
        </div>
    </div>
</nav>
<div class="container">
    {block name="main"}{/block}
</div>
<div class="footer">
    <p>Copyright 2018 <a href="#">{$systems.copyright}</a> All Rights Reserved</p>
</div>

<script src="/static/index/js/jquery-3.3.1.min.js"></script>
<script src="/static/index/js/bootstrap.min.js"></script>
<script src="__ADMIN__/../lib/layer/layer.js"></script>
<script>
    $(function () {
        $("#search").on('input', function () {
            let val = $(this).val();
            // let searchList
            if (val !== '') {
                $.ajax({
                    url: "{:url('index/index/search')}",
                    type: "get",
                    data: {val},
                    dataType: "json",
                    success: res => {
                        $(".search-list").empty();
                        console.log(res);
                        res.forEach(item => {
                            $(".search-list").append(`<div class="search-list-item"><a href="">${item.title}</a></div>`)
                        })

                    }
                })
            }else{
                $(".search-list").empty();
            }
        });
        $(".loginOut").mouseover(function () {
            $(".outSpan").css('display', "block")
        });
        $(".loginOut").mouseout(function () {
            $(".outSpan").css('display', "none")
        });
        $('#logout').on('click', function () {
            $.ajax({
                url: "{:url('index/index/logout')}",
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.code == 1) {
                        layer.msg("退出成功", {
                            icon: 6,
                            time: 2000
                        }, function () {
                            location.href = data.url;
                        })
                    } else {
                        layer.open({
                            content: data.msg,
                            icon: 5
                        })
                    }
                }
            })
        })
    })
</script>
{block name="js"}{/block}
</body>
</html>